<template>
  <div class="mainua">
    <div class="main_spac1" style="padding-bottom: 5px">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>新增用户</span>
          </div>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l"><em></em>基本信息</div>
        </div>
        <div class="mainua_form">
          <el-form
            :inline="false"
            :rules="rules"
            :model="basic_form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="110px"
          >
            <el-form-item label="用户名称：" prop="nickname">
              <el-input
                v-model.trim="basic_form.nickname"
                placeholder="用户名称"
                clearable
                class="wid240"
                @input="basic_form.address.name = basic_form.nickname"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机：" prop="mobile">
              <el-input
                v-model.trim="basic_form.mobile"
                placeholder="手机"
                clearable
                class="wid240"
                @input="basic_form.address.mobile = basic_form.mobile"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="密码："
              prop="password"
              style="margin-right: 0"
            >
              <el-input
                v-model.trim="basic_form.password"
                show-password
                placeholder="密码"
                clearable
                class="wid240"
              ></el-input>
            </el-form-item>
            <el-form-item label="用户分组：" prop="info.group_id">
              <el-select
                v-model.trim="basic_form.info.group_id"
                placeholder="用户分组"
                class="wid240"
              >
                <el-option label="无" :value="parseInt(0)"></el-option>
                <el-option
                  v-for="(group, index) in info.group"
                  :key="index"
                  :label="group"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支付方式：" prop="info.pay_type">
              <el-select
                v-model.trim="basic_form.info.pay_type"
                placeholder="支付方式"
                class="wid240"
              >
                <el-option label="全部" :value="2"></el-option>
                <el-option label="货到付款" :value="0"></el-option>
                <el-option label="在线支付" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态：" prop="status">
              <el-select
                v-model.trim="basic_form.status"
                placeholder="状态"
                class="wid240"
              >
                <el-option label="禁用" :value="0"></el-option>
                <el-option label="正常" :value="1"></el-option>
                <el-option label="审核" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="编码：" prop="info.code">
              <el-input
                v-model.trim="basic_form.info.code"
                placeholder="编码"
                clearable
                class="wid240"
              ></el-input>
              <el-input
                v-model.trim="prefix"
                placeholder="前缀(可以为空)"
                clearable
                class="wid140 marginLeft5"
              ></el-input>
              <el-button type="primary" class="marginLeft5" @click="automatic"
                >自动生成</el-button
              >
            </el-form-item>
            <el-form-item label="业务员：" prop="info.salesman_id">
              <el-select
                v-model.trim="basic_form.info.salesman_id"
                placeholder="业务员"
                class="wid240"
              >
                <el-option
                  v-for="(salesman, index) in info.salesman"
                  :key="index"
                  :label="salesman"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item
              label="运费："
              prop="delivery_fee"
              style="margin-right: 0"
              :rules="rules.delivery_fee"
            >
              <el-input
                v-model.trim="basic_form.info.delivery_fee"
                placeholder="运费"
                @change="delivery_fee"
                clearable
                class="wid240"
              ></el-input>
            </el-form-item> -->

            <!-- <div class="box">
              <el-form-item
                label="查看价格："
                prop="info.is_look"
                label-width="130px"
              >
                <el-switch
                  v-model="basic_form.info.is_look"
                  active-color="#03A98E"
                  active-text="开"
                  inactive-text="关"
                  class="mainor_switch"
                ></el-switch>
              </el-form-item>
            </div> -->

            <div>
              <el-form-item
                label="用户标签："
                prop="info.labels"
                class="label_ids boxha"
              >
                <el-checkbox-group v-model="basic_form.info.labels">
                  <el-checkbox
                    v-for="(item, index) in info.labels"
                    :key="index"
                    :label="index"
                    >{{ item }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-form-item>
            </div>
            <el-form-item
              label="查看价格："
              prop="is_look"
            >
              <el-switch
                v-model="basic_form.is_look"
                active-color="#03A98E"
                active-text="开"
                inactive-text="关"
                class="mainor_switch"
                :active-value="1"
                :inactive-value="0"
              ></el-switch>
            </el-form-item>

            <div class="main_tile boxdq">
              <div class="main_tile_l"><em></em>收货信息</div>
            </div>
            <el-form-item
              label="区域："
              prop="info.region_id"
              :rules="rules.region_id"
            >
              <el-select
                v-model.trim="basic_form.info.region_id"
                placeholder="区域"
                class="wid240"
              >
                <el-option
                  v-for="(region, index) in info.region"
                  :key="index"
                  :label="region"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="线路 ：" prop="info.line_id">
              <el-select
                v-model.trim="basic_form.info.line_id"
                placeholder="区域"
                class="wid240"
              >
                <el-option label="无" :value="0"></el-option>
                <el-option
                  v-for="(line, index) in info.line"
                  :key="index"
                  :label="line"
                  :value="parseInt(index)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="联系人："
              prop="address.name"
              :rules="rules.name"
            >
              <el-input
                v-model.trim="basic_form.address.name"
                placeholder="联系人"
                clearable
                class="wid240"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="收货人手机："
              prop="address.mobile"
              :rules="rules.mobile"
            >
              <el-input
                v-model.trim="basic_form.address.mobile"
                placeholder="收货人手机"
                clearable
                class="wid240"
              ></el-input>
            </el-form-item>
            <el-form-item label="配送时间：" prop="info.send_time_id ">
              <el-select
                v-model.trim="basic_form.info.send_time_id"
                placeholder="配送时间"
                class="wid2 40"
              >
                <el-option label="所有" :value="0"></el-option>
                <el-option
                  v-for="(send_time, index) in info.send_time"
                  :key="index"
                  :label="`${send_time.start_time}~${send_time.end_time}`"
                  :value="send_time.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="收货地址："
              prop="address.address"
              :rules="rules.address"
              class="shipping"
            >
              <div @click="shipping">
                <el-input
                  v-model.trim="basic_form.address.address_name"
                  placeholder="收货地址"
                  clearable
                  class="wid440"
                  suffix-icon="el-icon-location-outline"
                  :readonly="true"
                ></el-input>
              </div>
            </el-form-item>
            <el-form-item label="门牌号：" prop="address.detail">
              <el-input
                v-model.trim="basic_form.address.detail"
                placeholder="门牌号"
                clearable
                class="wid440"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="clearfix"></div>
          <div class="newConBox_p100 paddingBottom10" id="newConBox">
            <div class="newConBox_h32">
              <div
                :class="[
                  'mainua_an newConBox ',
                  { on: searchBarFixed },
                  { marginLeft5: !searchBarFixed },
                ]"
              >
                <el-button type="primary" @click="preservation" v-repeatClick
                  >保存</el-button
                >
                <el-button
                  type="primary"
                  @click="$refs['userListFrom'].resetFields()"
                  >重置</el-button
                >
              </div>
            </div>
          </div>

          <currency-map
            ref="map"
            :zcenter="center"
            @setupmine_map="setupmine_map"
          ></currency-map>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { member_add, member_base, member_generateCode } from "@/api/user/user";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import rules from "@/rules/user/userList";
import currencyMap from "@/components/public/map";

export default {
  components: {
    currencyMap,
  },
  data() {
    return {
      // 地图
      center: {
        lng: 115.89352755,
        lat: 28.689578,
      },
      // 验证
      rules,
      // 搜索
      basic_form: {
        pid: 0,
        nickname: "",
        mobile: "",
        password: "",
        status: 1,
        is_look: 1, // 是否显示价格
        address: {
          name: "",
          mobile: "",
          address: "",
          address_name: "",
          detail: "",
        },
        info: {
          send_time_id: 0,
          group_id: 0,
          salesman_id: null,
          pay_type: 2,
          code: "",
          // is_look: true,
          line_id: 0,
          region_id: "",
          delivery_fee: 0,
          labels: [], //用户标签数组
        },
        lat: "",
        lng: "",
      },
      prefix: "",
      // 信息
      info: {
        labels: {},
      },
      // 监听滚动
      searchBarFixed: false,
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  created() {
    // 下拉信息
    this.member_base();
  },
  methods: {
    // 地图
    shipping() {
      this.center.lng = this.basic_form.lng
        ? this.basic_form.lng
        : 115.89352755;
      this.center.lat = this.basic_form.lat ? this.basic_form.lat : 28.689578;
      this.$refs.map.sing();
    },
    setupmine_map(data) {
      this.basic_form.lng = data.center.lng;
      this.basic_form.lat = data.center.lat;
      this.basic_form.address.address = data.address;
      if (!data.addressStandby) {
        this.basic_form.address.address = data.address;
        this.basic_form.address.address_name = data.address;
      } else {
        this.basic_form.address.address = data.addressStandby;
        this.basic_form.address.address_name = data.address;
      }
      this.$refs["userListFrom"].clearValidate();
    },
    // 监听滚动
    handleScroll() {
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      scrollTop + document.documentElement.clientHeight >
      document.getElementById("newConBox").offsetTop + 200
        ? (this.searchBarFixed = false)
        : (this.searchBarFixed = true);
    },
    // 自动生成
    automatic() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { prefix: this.prefix })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { prefix: this.prefix }
      );
      member_generateCode(data).then((res) => {
        if (res.errcode == 0) {
          this.basic_form.info.code = this.prefix + res.data.codeNumber;
          this.$refs["userListFrom"].clearValidate();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    delivery_fee(val) {
      if (!/^(\d+\.?)?\d{0,2}$/.test(val)) {
        this.basic_form.info.delivery_fee = 0;
      }
    },
    // 保存
    preservation() {
      this.$refs["userListFrom"].validate((valid) => {
        if (valid) {
          let basic_form = JSON.parse(JSON.stringify(this.basic_form));
          basic_form.info.line_id = basic_form.info.line_id
            ? basic_form.info.line_id
            : 0;
          basic_form.info.salesman_id = basic_form.info.salesman_id
            ? basic_form.info.salesman_id
            : 0;
          basic_form.info.is_look = basic_form.info.is_look ? 1 : 0;
          basic_form.info.group_id = basic_form.info.group_id
            ? basic_form.info.group_id
            : 0;
          basic_form.info.labels =
            basic_form.info.labels.length != 0
              ? basic_form.info.labels.join(",")
              : "";
          basic_form.info.region_id = basic_form.info.region_id
            ? basic_form.info.region_id
            : 0;
          basic_form.address = JSON.stringify(basic_form.address);
          basic_form.info = JSON.stringify(basic_form.info);
          let data = Object.assign(
            {
              sign: Md5(
                objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
              ),
            },
            apiUrl().name,
            basic_form
          );

          member_add(data).then((res) => {
            if (res.errcode == 0) {
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.$router.go(-1);
            } else {
              this.$message.error(res.errmsg);
            }
          });
        }
      });
    },
    // 下拉信息
    member_base() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      member_base(data).then((res) => {
        if (res.errcode == 0) {
          this.info = res.data;
          this.info.labels = res.data.labels ? res.data.labels : [];
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainua_form {
  margin-left: 10px;
  margin-top: 10px;
  /deep/.el-form-item--mini.el-form-item,
  /deep/.el-form-item--small.el-form-item {
    margin-bottom: 22px;
  }
  .label_ids {
    display: block;
    /deep/.el-form-item__content {
      width: 50%;
      display: flex;
      flex-wrap: wrap;
    }
  }
  .main_tile {
    margin-left: -10px;
  }
  .mainua_form_sp {
    margin-left: 2px;
  }
  .shipping {
    /deep/.el-input__inner {
      background: #f5f7fa;
      &:hover {
        cursor: pointer;
      }
    }
    /deep/.el-input__icon {
      font-size: $font_18;
      color: $colour_6;
    }
  }
  .mainua_an {
    /deep/.el-form-item__content {
      margin-left: 0px !important;
    }
    .reset {
      background: $subActive;
      color: $menuText;
      border-color: $subActive;

      &:hover,
      &:focus {
        border-color: $menuActiveText;
        color: $menuActiveText;
      }
    }
  }
}
</style>
